<template>
<div id="add-user">
    <header class="add-user-header">
        <h3 class="add-user-title">添加用户</h3>
    </header>
    <form class="add-user-from" ref="userForm">
        <!-- 
            type: 类型 (String 默认值是 "text")
            name: (label:for/id/class/name...)的值 (String)
            isvalidatarule: 是否开启规则提示 (true/false)
            rulebool: 规则bool (true/false)
        -->
        <my-input
            :name="'username'" 
            :title="'用户名'"
            :minlength="4"
            :maxlength="6"
            :isvalidatarule="username.isvalidatarule"
            :rulebool="username.rulebool"
            v-model="username.value"
        ></my-input>
        <my-input 
            :type="'password'"
            :name="'password'" 
            :title="'密码'" 
            :minlength="6"
            :maxlength="20"
            :isvalidatarule="password.isvalidatarule" 
            :rulebool="password.rulebool" 
            v-model="password.value"
        ></my-input>
        <my-input 
            :type="'email'"
            :name="'email'" 
            :title="'邮箱'" 
            :isvalidatarule="email.isvalidatarule" 
            :rulebool="email.rulebool" 
            v-model="email.value"
        ></my-input>
        <my-input 
            :type="'tele'"
            :name="'tele'"
            :title="'手机号码'" 
            :minlength="11"
            :maxlength="11"
            :isvalidatarule="tele.isvalidatarule" 
            :rulebool="tele.rulebool" 
            v-model="tele.value"
        ></my-input>
    </form>
    <footer class="add-user-footer">
        <my-button
            :type="'reset'"
            class="reset"
            @click.native="handleClickResetUserForm"
        >重置</my-button>
        <my-button
            :type="'add'"
            class="add"
            :disabled="!(this.username.rulebool
                && this.password.rulebool
                && this.email.rulebool
                && this.tele.rulebool)" 
            @click.native="handleClickAddUser"
        >添加</my-button>
    </footer>
</div>
</template>

<script>
import { Local } from '../../common'
import { 
    USER_LIST
} from '../../config/localConstant'
import { addUser } from "../../config/data"
export default {
    name: "addUser",
    data() {
        return {
            username: {
                value: "",
                isvalidatarule: false,
                rulebool: false
            },
            password: {
                value: "",
                isvalidatarule: false,
                rulebool: false
            },
            email: {
                value: "",
                isvalidatarule: false,
                rulebool: false
            },
            tele: {
                value: "",
                isvalidatarule: false,
                rulebool: false
            },
            ruleTime: 300,
            pret: 0,
        }
    },
    methods: {
        handleClickResetUserForm() {
            this.username.value = ""
            this.password.value = ""
            this.email.value = ""
            this.tele.value = ""
            this.username.isvalidatarule = false
            this.password.isvalidatarule = false
            this.email.isvalidatarule = false
            this.tele.isvalidatarule = false
        },
        async handleClickAddUser() {
            let userInfo = this.getUserFormData()
            let result = await addUser({
                ...userInfo,
                ctime: Date.now(),
                utime: Date.now(),
            })
            // 添加成功后跳转到 用户列表 的最后一页(及时查看新添加的用户信息)
            if(!result.fsBool) return;
            let { msg } = Local.get(USER_LIST.KEY)
            msg[USER_LIST.SELECTED_PAGE_OF_COUNT] = msg[USER_LIST.SELECTED_PAGE_OF_COUNT] || 2
            msg[USER_LIST.SELECTED_PAGE_NUMBER] = Math.ceil(result.data.total / msg[USER_LIST.SELECTED_PAGE_OF_COUNT]) || 1
            Local.set(USER_LIST.KEY, msg)
            this.$router.push({name: "userList"})
        },
        getUserFormData() {
            let userForm = this.$refs.userForm
            let formData = new FormData(userForm)
            let userInfo = {
                username: formData.get("username"),
                password: formData.get("password"),
                email: formData.get("email"),
                tele: formData.get("tele"),
            }
            return userInfo;
        }
    },
    watch: {
        "username.value"() {
            if(this.username.value.length === 0) {
                this.username.isvalidatarule = false
                return;
            }
            let nowt = Number(Date.now())
            if(nowt - this.pret > this.ruleTime) {
                this.pret = nowt
                setTimeout(_ => {
                    this.username.isvalidatarule = true
                    let len = this.username.value.length
                    if(len >=4 && len <= 6) {
                        this.username.rulebool = true
                    } else {
                        this.username.rulebool = false
                    }
                }, this.ruleTime)
            }
        },
        "password.value"() {
            if(this.password.value.length === 0) {
                this.password.isvalidatarule = false
                return;
            }
            let nowt = Number(Date.now())
            if(nowt - this.pret > this.ruleTime) {
                this.pret = nowt
                setTimeout(_ => {
                    this.password.isvalidatarule = true
                    let len = this.password.value.length
                    if(len >=6 && len <= 20) {
                        this.password.rulebool = true
                    } else {
                        this.password.rulebool = false
                    }
                }, this.ruleTime)
            }
        },
        "email.value"() {
            if(this.email.value.length === 0) {
                this.email.isvalidatarule = false
                return;
            }
            let nowt = Number(Date.now())
            if(nowt - this.pret > this.ruleTime) {
                this.pret = nowt
                setTimeout(_ => {
                    this.email.isvalidatarule = true
                    if(/^\w{2,}@(\w+\.\w+)+$/.test(this.email.value)) {
                        this.email.rulebool = true
                    } else {
                        this.email.rulebool = false
                    }
                }, this.ruleTime)
            }
        },
        "tele.value"() {
            if(this.tele.value.length === 0) {
                this.tele.isvalidatarule = false
                return;
            }
            let nowt = Number(Date.now())
            if(nowt - this.pret > this.ruleTime) {
                this.pret = nowt
                setTimeout(_ => {
                    this.tele.isvalidatarule = true
                    if(/^1[358][0-9]{9}$/.test(this.tele.value)) {
                        this.tele.rulebool = true
                    } else {
                        this.tele.rulebool = false
                    }
                }, this.ruleTime)
            }
        }
    }
}
</script>

<style scoped>
#add-user {
    height: 100%;
}
.add-user-header {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
}
.add-user-from {
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100% - 100px);
}
.add-user-from::-webkit-scrollbar {
    display: none;
}
.add-user-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    line-height: 50px;
}
.add-user-footer .reset,
.add-user-footer .add {
    margin: 0 12px;
}
</style>